<template>
	<view class="my-recommend">
        <view class="tabs-view">
            <u-tabs :list="list" :is-scroll="false" :current="current" active-color="#ff5000" @change="change"></u-tabs>
        </view>
        <view class="recommend-list">
            <mescroll-body ref="mescrollRef" top="80" auto="false" :down="down"  @init="mescrollInit" @down="downCallback" @up="upCallback">
                <view class="recommend-item" v-for="(item,index) in refereeList" :key="index">
                    <view class="u-p-t-20 u-p-b-20 u-m-20">
                        <view class="u-flex">
                            <view class="">
                               <u-avatar></u-avatar>
                            </view>
                            <view class="u-flex-1 u-m-l-20">
                                <view class="u-m-b-15">{{ item.name}}</view>
                                <view class="time">
                                    加入时间：{{ item.create_time | date }}
                                </view>
                            </view>
                            <view class="u-text-right">
                                <view class="">
                                    返利：<text class="price">{{ item.rebate_total | unitPrice('￥') }}</text>
                                </view>
                                <view class="">
                                    营业额：<text class="price">{{ item.turnover_price | unitPrice('￥') }}</text>
                                </view>
                            </view>
                        </view>
                        <view class="num u-text-right">
                            {{ item.order_num }}笔订单
                        </view>
                    </view>
                </view>
            </mescroll-body>
        </view>
	</view>
</template>

<script>
    import * as API_Distribution from '@/api/distribution.js'
    // 引入mescroll-mixins.js
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	export default {
        mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
                list: [
                    {name: '一级（0）'},
                    {name: '二级（0）'}
                ],
                current: 0,
                refereeList: [],
                oneReferee: [], //一级推荐
                twoReferee: [], //二级推荐
                down: {
                    auto: false
                }
			};
		},
        methods: {
            // 上拉加载数据
            upCallback (){
                this.getRefereeList()
            },
            // 下拉刷新
            downCallback(){
                this.change(this.current)
            },
            change(index) {
                this.current = index
                this.twoReferee = []
                this.getRefereeList()
            },
            // 获取推荐人列表
            getRefereeList() {
                API_Distribution.getRefereeList().then(response => {
                    this.oneReferee = response
                    response.forEach(key => {
                        if(key.item && key.item.length) {
                            this.twoReferee.push(key.item[0])
                        }
                    })
                    if (this.current) {
                        this.refereeList = this.twoReferee
                    } else {
                        this.refereeList = this.oneReferee
                    }
                    this.list[0].name = '一级' + '(' + this.oneReferee.length + ')'
                    this.list[1].name = '二级' + '(' + this.twoReferee.length + ')'
                    this.mescroll.endBySize(this.refereeList.length, this.refereeList.length)
                }).catch(error => {
                    this.mescroll.endErr()
                })
            },
        }
	}
</script>

<style lang="scss" scoped>
    .my-recommend {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--window-top));
        width: 100%;
        .recommend-list {
            margin: 20rpx;
            .recommend-item {
                background-color: #FFFFFF;
                border-radius: 10rpx;
                .time, .num {
                    color: #989898;
                    font-size: 24rpx;
                }
                .price {
                    color: $u-type-error;
                }
            }
        }
    }
</style>
